import {Detail} from "../classes/MyUI.js";
import MyComponent from "../classes/MyComponent.js";
import {generateElement} from "../functions/common.js";

const detail = new Detail(
    "跳动Block",
    ["By Louis，2021-01-15", "Jumping Block is a 30x30 block."],
    {margin: "30px 40px"}
);
document.getElementById("detail").appendChild(detail.getElement());

export class JumpingIcon extends MyComponent {
    constructor(){
        super();
        this.elem = generateElement({
            type: "div", width: "30px", height: "30px",
        });
        this.elem.innerHTML = "<i class=\"layui-icon layui-icon-app\" style=\"font-size: 30px; color: #1E9FFF;\"></i>";
        this.animation = null;
        this.jumping = false;
        try {
            this.animation = anime({
                targets: this.elem,
                translateY: -30,
                direction: 'alternate',
                loop: true,
                autoplay: true,
                duration: 400,
                easing: 'easeInOutSine',
            });
            this.animation.pause();
        }catch (e) {
            console.log("Error:JumpingIcon", e)
        }
    }
    startJump(){
        if (this.jumping===false){
            this.jumping = true;
            if (this.animation)this.animation.play();
        }
    }
    pauseJump(){
        if (this.jumping===true){
            this.jumping = false;
            if (this.animation)this.animation.pause();
        }
    }
    exchange(){
        if (this.jumping===false){
            this.jumping = true;
            if (this.animation)this.animation.play();
        }else {
            this.jumping = false;
            if (this.animation)this.animation.pause();
        }
    }
}

let jumpingIcon = new JumpingIcon();
document.getElementById("icon").appendChild(jumpingIcon.getElement());

document.getElementById("testBtn").onclick = () => {
     jumpingIcon.exchange();
};

